<template>
  <div class="MailTemp">
    <header class="set-header">
      <span class="auto_title">导入邮件列表</span>
      <el-button size="mini" type="primary" @click="dialogVisible=true">
        +导入邮件
      </el-button>
    </header>
    <div class="gray"></div>
    <div class="content">
      <el-table :data="tableData" :height="$height - 230+'px'" class="table" stripe style="margin-top: 10px">
        <el-table-column label="文件名" prop="fileName" width="230px"></el-table-column>
        <el-table-column label="所在邮箱" prop="targetEmail" width="250px"></el-table-column>
        <el-table-column label="目标文件夹">
          <template slot-scope="scope">
            {{filterName(scope.row.targetDir)}}
          </template>
        </el-table-column>
        <el-table-column label="导入状态">
          <template slot-scope="scope">
            <span style="color: #87CE9F">已成功</span>
          </template>
        </el-table-column>
        <el-table-column label="邮件总数/成功数" prop="emailCount"></el-table-column>
        <el-table-column label="导入时间" prop="createTime" width="160px"></el-table-column>
      </el-table>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="550px"
               :close-on-click-modal="false" :close-on-press-escape	='false'
               title="导入邮件" center>
      <el-form ref="form" :label-position="labelPosition" :before-close="close"
               :model="form" :rules="rules" label-width="100px">
        <el-form-item label="本地文件:" prop="file">
          <el-button size="mini" @click="chooseFile">选择文件</el-button>
          <span class="more" v-if="form.file.length>0">{{form.file[0].name}}</span>
          <p>（暂时只支持eml文件或者是eml文件组成的zip压缩包，不超过2G）</p>
        </el-form-item>
        <el-form-item label="目标邮箱:" prop="email">
          <el-select v-model="form.email" placeholder="请选择目标邮箱" size="small" style="width: 300px">
            <el-option v-for="item in common.emailList" :key="item.emailAddr"
                       :label="item.emailAddr" :value="item.emailAddr"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目标文件夹:" prop="folder">
          <el-cascader :options="options"  :props="defaultProps" v-if="dialogVisible"
                       v-model="form.folderArr"
                       size="small" style="width: 300px"
                       change-on-select></el-cascader>
        </el-form-item>
      </el-form>
      <!-- 底部按钮-->
      <div slot="footer" class="dialog-footer" align="center">
        <el-button @click="close" size="mini">取 消</el-button>
        <el-button type="primary" @click="saveInfo" size="mini" :loading="loading">{{loading?'导入中':'确 定'}}</el-button>
      </div>
      <input type="file" @change="upload" ref="fileTarget" accept=".zip, .eml" hidden>
    </el-dialog>
  </div>
</template>

<script>
    import {query, enterEmail} from "@/api/mail/admin/mail-email";
    import {mapState} from 'vuex'
    import {queryFolder} from "@/api/mail/admin/mail-doc"

    export default {
        name: "MailEmail",
        data() {
            return {
                labelPosition:'left',
                dialogVisible: false,
                tableData: [],
                form: {
                    file: [],
                    email: '',
                    folder: '',
                    folderArr:[]
                },
                rules: {
                    file: [
                        {required: true, message: '请上传要导入的邮件', trigger: 'blur'}
                    ],
                    email: [
                        {required: true, message: '请选择目标邮箱', trigger: 'blur'}
                    ],
                    folder:[
                        {required: true, message: '请选择目标文件夹', trigger: 'blur'}
                    ]
                },
                defaultProps: {
                    children: 'children',
                    label: 'text',
                    value: 'id'
                },
                options:[],
                loading:false,
            }
        },
        computed: {
            ...mapState(['common'])
        },
        created() {
            this.getFolder();
            this.getData();
        },
        methods: {
            chooseFile(){
                this.$refs.fileTarget.dispatchEvent(new MouseEvent('click'))
            },
            upload(event) {// this.form.file
                const file = event.target.files[0];
                if(file.size>2147483648){//最大支持2G - 2147483648
                    this.$message({
                        type: "success",
                        message: '单个文件包最大支持2G'
                    });
                    return;
                }
                this.form.file =[file];
                this.$refs.fileTarget.value=''
            },
            getData() {
                query().then(res => {
                    this.tableData = res.data.data;
                }).catch(err => {
                    console.log(err)
                });
            },
            saveInfo() {
                if(this.form.folderArr.length==0){
                    this.$message({
                        type: "success",
                        message: '请选择归档文件夹'
                    });
                    return;
                }else{
                    if(this.form.folderArr.length==1&&(this.form.folderArr[0]==''||this.form.folderArr[0]==-1)){
                        this.$message({
                            type: "success",
                            message: '请选择归档文件夹'
                        });
                        return;
                    }
                    this.form.folder=this.form.folderArr[this.form.folderArr.length-1]
                }
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.loading = true
                        let formData = new FormData();
                        this.form.file.map(item=>{
                            formData.append("file", item);
                        })
                        formData.append("boxId",this.form.folder==0||this.form.folder==3?this.form.folder:7);
                        formData.append("archiveFolderId", this.form.folder);
                        formData.append("userEmail", this.form.email);
                        enterEmail(formData).then(res => {
                            this.loading = false;
                            this.$refs.fileTarget.value = '';
                            this.$refs.form.resetFields();
                            this.form.folderArr=[];
                            this.dealEnd(res)
                        }).catch(err => {
                            this.loading = false;
                            console.log(err)
                        });
                    } else {
                        return false;
                    }
                });
            },
            getFolder() {
                queryFolder().then(res => {
                    const result = res.data.data;
                    this.options = [
                        {
                            id: '0',
                            text: '收件箱',
                        },
                        {
                            id: '3',
                            text: '发件箱',
                        },
                        {
                            id: '-1',
                            text: '归档文件夹',
                            children:result
                        },
                    ]
                });
            },
            close(){
                this.form.folderArr =[];
                this.$refs.form.resetFields();
                this.dialogVisible=false;
            },
            dealEnd(res) {
                if(res.data.success){
                    this.bus.$emit('refreshEmailNum')
                    this.dialogVisible = false;
                    this.$message({
                        type: "success",
                        message: res.data.msg
                    });
                    this.getData();
                }else{
                    this.$message({
                        type: "success",
                        message: res.data.msg
                    });
                }
            },
            filterName(id) {
                switch (parseInt(id)) {
                    case 0:
                        return '收件箱';
                    case 3:
                        return '发件箱';
                    case 7:
                        return '归档文件';
                    default:
                        return '-'
                }
            }
        }
    }
</script>

<style scoped lang="scss">
  $activeColor: #2A97F9;
  .content {
    margin-left: 30px;
  }

  .el-select {
    width: 100%;
  }
  .el-dialog{
    .el-form-item{
      span{
        font-size: 13px;
        margin-left: 10px;
        color: $activeColor;
      }
      p{
        font-size: 12px;
        color: #8C8C8C;
        line-height: 20px;
      }
      button.el-button.el-button--default.el-button--mini{
        width:100px;
        line-height:35px;
        padding: 0;
        font-size: 14px;
        text-align: center;
        background:rgba(243,243,243,1);
        border-radius:10px;
        border: none;
      }
    }
  }
  button.el-button.create.el-button--primary.el-button--small {
    width: 94px;
    line-height: 35px;
    font-size: 14px;
    color: #fff;
    border-radius: 5px;
    padding: 0;
    margin-left: 30px;
    border: 0;
    background-color: $activeColor;
  }
</style>
